<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width,minimum-scale=0.5,maximum-scale=1.0,initial-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="swiper/reset.css">
<style>
	body{background: #f3eff0;font-family: "微软雅黑";}
	b{font-weight: normal;}
	.outer{width:640px;margin: 0 auto;}
	header{width:640px;height:90px;text-align: center;line-height:90px;font-size:35px;background: #a90506;color:#fff;}
	section{padding-top:26px}
	.mess{width:580px; height:180px;margin:0 auto;}
	.username,.pass{width:560px;height:86px;margin-top: 4px;border:0;border-radius:7px;padding-left:20px;font-size: 25px;}
	
	.set{padding-left:50px;width:590px;}
	.set p{padding-top:50px;height:42px;font-size: 28px;color:#5a5a5a;line-height: 42px;}
	.kuang{display: inline-block;width:40px;height:40px;border:1px solid #5b5b5b;border-radius:5px;margin-right: 10px;vertical-align: bottom;}
	.set p b{padding-left:40px;color:#fe0f52;}
	.duihao{background: url(img/duihao.png) no-repeat center;}
	
	.btn{width:580px;height:200px;margin:50px auto 0;}
	.denglu,.zhuce{border: 0;width:580px;height:90px;margin-bottom:10px;border-radius: 7px;font-size: 33px;color:#fff;}
	.denglu{background: url(img/dengbg.jpg) repeat-x;}
	.zhuce{background: url(img/zhucebg.jpg) repeat-x;}
</style>

</head>
<body>
<div class="outer">
	<header>
		开心摇摇用户登录
	</header>
	<section>
		<div class="mess">
			<input type="text" placeholder="请输入账户" class="username"/>
			<input type="password" placeholder="请输入密码" class="pass"/>
		</div>
		<div class="set">
			<p><span id="show" class="kuang"></span>显示密码<b>忘记密码?</b></p>
			<p><span class="kuang duihao"></span>记住密码自动登录</p>
		</div>
		<div class="btn">
			<input type="button" value="登录" class="denglu"/>
			<input type="button" value="注册" class="zhuce"/>
		</div>
	</section>
</div>
</body>
<script src="js/jquery.js"></script>
<script src="swiper/zepto.js"></script>
<script src="swiper/touch.js"></script>
<script> 
	function bodyScale(){
		var devicewidth=document.documentElement.clientWidth;
		var scale=devicewidth/640;
		document.body.style.zoom=scale;
	}
	
	window.onload=window.onresize=function(){
		bodyScale();
	}
	
</script>
<script>
(function(){
	$(".denglu").click(function(){
		var zh = $(".username").val();
		var mm = $(".pass").val();
		if(zh!="" && mm!=""){
				$.ajax({
					type:"get",
					url:"http://datainfo.duapp.com/shopdata/userinfo.php",
					data:{status:"login",userID:zh,password:mm},
					dataType:"json",
					success:function(data){
						if(data==0){
							alert("用户名不存在");
						}else if(data==2){
							alert("用户名密码不符");	
						}else {
							
							localStorage.setItem("name",zh)
							window.open("wdxiu.html","_self");
						}
						
					}
					
				});
		}else{
			alert("账户和密码都不能为空！");
		}
	})
	$(".zhuce").click(function(){
		window.open("zhece.html","_self");
	})
	
	var tag = true;
	$("#show").click(function(){
		$("#show").toggleClass("duihao");
		if(tag){
			$(".pass").prop("type","text");
			tag = false;
		}else{
			$(".pass").prop("type","password");
			tag = true;
		}
	})
})(jQuery)
</script>
</html>